<template>
  <div class="container">
    <el-drawer
      v-model="isShow"
      :before-close="close"
      :destroy-on-close="true"
      :with-header="false"
      size="500px"
      ><div id="account-form-container">
        <el-card class="box-card" shadow="never" :body-style="{ border: 0 }">
          <template #header>
            <div class="clearfix">
              <span
                v-text="eventType == 'add' ? '创建教师' : '修改教师'"
              ></span>
            </div>
          </template>
          <div class="studentcrad">
            <el-form
              ref="tearcherRef"
              :model="teacher"
              :rules="saveTeacherRule"
              label-width="80px"
            >
              <el-form-item label="教职工号" prop="teacherNum">
                <el-input
                  v-model="teacher.teacherNum"
                  :disabled="eventType == 'edit'"
                  placeholder="教职工号"
                ></el-input>
              </el-form-item>
              <el-form-item label="教师姓名" prop="teacherName">
                <el-input
                  v-model="teacher.teacherName"
                  placeholder="请填写教师姓名"
                ></el-input>
              </el-form-item>
              <el-form-item label="身份证号" prop="teacherCardId">
                <el-input
                  v-model="teacher.teacherCardId"
                  placeholder="请填写教师身份证号码"
                ></el-input>
              </el-form-item>
              <el-form-item label="教师学历" prop="education">
                <el-select
                  v-model="teacher.education"
                  placeholder="请选择教师学历"
                >
                  <el-option
                    v-for="(item, index) in educations"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="教师学位" prop="academicDegree">
                <el-select
                  v-model="teacher.academicDegree"
                  placeholder="请选择教师学位"
                >
                  <el-option
                    v-for="(item, index) in academicDegrees"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="教师性别" prop="teacherGender">
                <el-radio-group v-model="teacher.teacherGender">
                  <el-radio label="男"></el-radio>
                  <el-radio label="女"></el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSaveTeacher"
                  style="margin-bottom: 30px"
                  >保存</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import {
  reactive,
  ref,
  toRefs,
  unref,
  computed,
  watch,
  watchEffect,
} from "vue";
import { UserService, Collageinfo, Teacher } from "@/api/user";
import { useStore } from "vuex";
import { ElMessage } from "element-plus";
import Code from "@/consts/common";

export default {
  name: "teacherDrawer",
  props: {
    eventType: {
      type: String,
      default: "add",
    },
    isShow: {
      type: Boolean,
      default: false,
    },
    editTeacherId: {
      type: String,
      default: {},
    },
    drawerClose: {
      type: Function,
    },
  },
  setup(props: any) {
    const tearcherRef = ref();
    const store = useStore();
    const collageinfo: Collageinfo[] = [];
    const teacher: Teacher = {};

    let data = reactive({
      teacher: teacher,
      page: computed(() => store.state.Teacher.page),
      size: computed(() => store.state.Teacher.size),
      academicDegrees: ["学士", "硕士", "博士"],
      educations: ["小学", "初中", "高中", "专科教育", "本科教育", "研究生"],
      saveTeacherRule: {
        teacherNum: [
          { required: true, message: "请输入教职工号", trigger: "blur" },
        ],
        teacherName: [
          { required: true, message: "请输入教师姓名", trigger: "blur" },
        ],
        teacherCardId: [
          { required: true, message: "请输入教师身份证号码", trigger: "blur" },
          {
            pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号码",
            trigger: "change",
          },
        ],
        teacherGender: [
          { required: true, message: "请选择性别", trigger: "blur" },
        ],
        academicDegree: [
          { required: true, message: "请填写学位", trigger: "blur" },
        ],
        education: [{ required: true, message: "请填写学历", trigger: "blur" }],
      },
      close() {
        props.drawerClose();
        data.teacher = {};
      },
      onSaveTeacher() {
        const tearcherRefq = unref(tearcherRef);
        if (!tearcherRefq) return;
        tearcherRefq.validate((valid: Boolean) => {
          if (valid) {
            UserService.saveTeacher(data.teacher, props.eventType).then(
              (res) => {
                if (res.code == Code.CODE_SUCCESS) {
                  ElMessage({
                    showClose: true,
                    message:
                      props.eventType == "add"
                        ? "创建教师成功"
                        : "编辑教师成功",
                    type: "success",
                  });
                  tearcherRefq.resetFields();

                  store.dispatch("Teacher/addAfterLoadUserList", {
                    page: data.page,
                    size: data.size,
                    keyword: "",
                  });
                  if (props.eventType == "edit") {
                    props.drawerClose();
                    data.teacher = {};
                  }
                }
              }
            );
          }
        });
      },
    });

    watch(
      () => props.isShow,
      (newValue: boolean, oldVlaue) => {
        if (newValue && props.editTeacherId != "") {
          UserService.getTeacherById(props.editTeacherId).then((res) => {
            if (res.code == Code.CODE_SUCCESS) {
              data.teacher = res.data;
            }
          });
        }
      }
    );

    return {
      ...toRefs(data),
      tearcherRef,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  margin: 0 15px;
  .studentcrad {
    padding: 0 20px 20px 0;
    margin-bottom: 20px;
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
</style>

<style lang="less">
#account-form-container {
  .el-card {
    border: none;
  }
}
</style>
